<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册表单验证</title>
		<style type="text/css">
			.errInfo{color: red; font-size: 12px;}
			.errInfo img{ vertical-align:middle;}
		</style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	</head>
	<body>
		<form action="Demo12_01.html" >
		<table width="1000" align="center">
			<caption>用户注册</caption>
			<tr>
				<td width="300" align="right" height="30">用户名:</td>
				<td width="700"><input type="text" id="txtAccount" >
					<span id="spanAccount" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">密码:</td>
				<td width="700"><input type="password" id="txtPwd" >
					<span id="spanPwd" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">密码确认:</td>
				<td width="700"><input type="password" id="txtPwdOk" ">
					<span id="spanPwdOk" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">性别:</td>
				<td width="700">
					<input type="radio" name="sex" id="rdBoy" value="男" >男
					<input type="radio" name="sex" id="rdGirl" value="女" >女	
					<span id="spanSex" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">专业:</td>
				<td width="700">
					<select id="selProfessional" >
						<option value="">--请选择--</option>
						<option value="软件开发">软件开发</option>
						<option value="电子商务">电子商务</option>
						<option value="国际贸易">国际贸易</option>
						<option value="工商管理">工商管理</option>
						<option value="高级护理">高级护理</option>
					</select>
					<span id="spanProfessional" class="errInfo"></span>
				</td>
			</tr>			
			<tr>
				<td width="300" align="right" height="30">爱好:</td>
				<td width="700" >
					<input type="checkbox" name="hobby" value="抽烟" "/>抽烟
					<input type="checkbox" name="hobby" value="喝酒" "/>喝酒
					<input type="checkbox" name="hobby" value="打游戏" "/>打游戏
					<input type="checkbox" name="hobby" value="烫头发" "/>烫头发
					<input type="checkbox" name="hobby" value="足球" "/>足球
					<input type="checkbox" name="hobby" value="篮球" "/>篮球
					<span id="spanHobby" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">自我介绍:</td>
				<td width="700">
					<textarea id="mySelf" rows="10" cols="60"></textarea>
                    <span id="spanMySelf" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">&nbsp;</td>
				<td width="700">
					<input type="submit" value="注册" />
					<input type="reset" value="取消" />
				</td>
			</tr>
		</table>
		</form>		
        <script>
        //验证账号
        function checkUserName() {
            if ($("#txtAccount").val() == "") {
                $("#spanAccount").html("用户名不能为空！");
            } else {
                $("#spanAccount").html("");
                return true;
            }
        }

        //账号失焦
        $("#txtAccount").blur(function () {
            checkUserName();
        })

        //验证密码
        function checkPassWord() {
            if ($("#txtPwd").val() == "") {
                $("#spanPwd").html("密码不能为空！");
            } else {
                var regExp = /\w{6}/;
                if (!regExp.test($("#txtPwd").val())) {
                    $("#spanPwd").html("密码需要6位以上");
                } else {
                    $("#spanPwd").html("");
                    return true;
                }

            }
        }

        //密码失焦
        $("#txtPwd").blur(function () {
            checkPassWord();
        })

         //确认密码
         function checkPassWordOk() {
            if ($("#txtPwdOk").val() == "") {
                $("#spanPwdOk").html("确认密码不能为空");
            } else {
                if ($("#txtPwdOk").val() != $("#txtPwd").val()) {
                    $("#spanPwdOk").html("两次密码不一致");
                } else {
                    $("#spanPwdOk").html("");
                    return true;
                }
            }

        }

        //确认密码失焦
        $("#txtPwdOk").blur(function () {
            checkPassWordOk();
        })

        //性别
        function checkSex(){
          const arr = [];
          var num = 0;
          $("input[type=radio]").each(function(i,e){
            arr[i] = e.checked;
          })
          arr.forEach(e=> e==true?num++:num);
          if(num == 0){
            $("#spanSex").html("爱好不能为空!");
          }else{
            $("#spanSex").html("");
            return true;
          }
        }

        //专业
        function checkMajor(){
           if($("#selProfessional").val() == ""){
            $("#spanProfessional").html("专业不能为空!")
           }else{
            $("#spanProfessional").html("")
            return true;
           }
        }

        //爱好
        function checkHobby(){
            const arr = [];
            var num = 0;
            $("input[type=checkbox]").each(function(i,e){
                arr[i] = e.checked;
            })
            arr.forEach(e => e==true?num++:num);
            if(num == 0){
                $("#spanHobby").html("爱好不能为空");
            }else{
                $("#spanHobby").html("");
                return true;
            }
        }

        //自我介绍
        function checkMyself(){
            if($("#mySelf").val() == ""){
                $("#spanMySelf").html("自我介绍不能为空！")
            }else{
                $("#spanMySelf").html("")
                return true;
            }
        }

        //自我介绍失焦
        $("#mySelf").blur(function(){
            checkMyself();
        })

        
        //注册
        $("input").eq(-2).click(function () {
            var a = checkUserName();
            var b = checkPassWord();
            var c = checkPassWordOk();
            var d = checkSex();
            var e = checkMajor();
            var f = checkHobby();
            var g = checkMyself();
            if(a && b && c && d && e && f && g){
                alert("注册成功")
            }else{
                 return false;
            }
           
        })
            
        </script>
	</body>
</html>